<template>
  <el-dialog v-model="visible" draggable :title="$t('examCore.submitConfirm')" width="800" :before-close="handleClose"
    :close-on-click-modal="false" :append-to-body="true">
    <div class="submit-confirm-content scroll-container">
      <!-- 答题统计和状态说明 -->
      <div class="mb-6">
        <div class="text-center mb-4">
          <p class="text-sm text-gray-700 mb-2">
            <span v-html="$t('examCore.submitConfirmTxt', [
              totalQuestions,
              `<span class='question-answered-color font-bold text-lg'>${answeredCount}</span>`,
              `<span class='question-unanswered-color font-bold text-lg' style='color: red;'>${unansweredCount}</span>`,
              `<span class='question-marked-color font-bold text-lg'>${markedCount}</span>`
            ])"></span>
          </p>
        </div>
        <!-- 状态图例 -->
        <div class="flex justify-end mb-4">
          <AnswerCardStatus :show-legend="true" :show-questions="false" />
        </div>
        <!-- 题目列表 -->
        <div class="max-h-80 overflow-y-auto">
          <AnswerCardStatus :sections="sections" :show-legend="false" :show-questions="true"
            @question-click="handleQuestionClick" />
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <template #footer>
      <div class="flex justify-end gap-3">
        <el-button @click="handleCancel" size="default">
          {{ $t('examCore.returnToExam') }}
        </el-button>
        <el-button type="primary" @click="handleConfirm" size="default">
          {{ $t('examCore.submitConfirmBtn') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { QuestionItem, QuestionSection } from '#/types/question';
import AnswerCardStatus from './answer-card-status.vue';
import { useMessageBox } from '#/hooks/useMessageBox';
import { QUESTION_STATUS } from '../../const';
import { $t } from '@vben/locales';

interface Props {
  modelValue: boolean;
  sections?: QuestionSection[];
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  sections: () => []
});

const emit = defineEmits<{
  'update:modelValue': [value: boolean];
  confirm: [];
  cancel: [];
}>();

defineOptions({
  name: 'SubmitConfirmDialog'
});

// 计算属性：对话框显示状态
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
});

// 计算答题统计
const answeredCount = computed(() => {
  return props.sections.reduce((count, section) => {
    return count + section.questions.filter(q => q.status === QUESTION_STATUS.ANSWERED).length;
  }, 0);
});

const unansweredCount = computed(() => {
  return props.sections.reduce((count, section) => {
    return count + section.questions.filter(q => q.status === QUESTION_STATUS.UNANSWERED).length;
  }, 0);
});

const { confirm: confirmSubmit } = useMessageBox({})

const markedCount = computed(() => {
  return props.sections.reduce((count, section) => {
    return count + section.questions.filter(q => q.status === QUESTION_STATUS.MARKED).length;
  }, 0);
});

// 总题目数
const totalQuestions = computed(() => {
  return props.sections.reduce((count, section) => {
    return count + section.questions.length;
  }, 0);
});

// 处理对话框关闭
const handleClose = () => {
  visible.value = false;
  emit('cancel');
};

// 处理取消
const handleCancel = () => {
  visible.value = false;
  emit('cancel');
};

// 处理确认提交
const handleConfirm = () => {
  // 构建完整的提示信息
  let messageParts = [];

  if (unansweredCount.value > 0) {
    messageParts.push(`<span style="color: red; font-weight: bold;font-size: 15px;">${unansweredCount.value}</span>${$t('examCore.questions.unansweredCount')}`);
  }

  if (markedCount.value > 0) {
    messageParts.push(`<span style="color: orange; font-weight: bold;font-size: 15px;">${markedCount.value}</span>${$t('examCore.questions.markedCount')}`);
  }

  if (messageParts.length > 0) {
    const message = $t('examCore.questions.submitConfirmMessage', { messages: messageParts.join('，') });
    confirmSubmit(message).then(() => {
      visible.value = false;
      emit('confirm');
    })
  } else {
    visible.value = false;
    emit('confirm');
  }
};

// 处理题目点击
const handleQuestionClick = (question: QuestionItem) => {
  // 在提交确认对话框中，题目点击不执行任何操作
  // 或者可以添加其他逻辑，比如滚动到对应题目
  console.log('Question clicked in submit dialog:', question);
};

</script>

<style>
@import '../question-status.css';
</style>

<style scoped>
.scroll-container {
  /* 为滚动条留出空间 */
  padding-right: 8px;
}

.scroll-container::-webkit-scrollbar {
  width: 6px;
}

.scroll-container::-webkit-scrollbar-track {
  background: transparent;
  margin-right: 8px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Firefox 滚动条样式 */
.scroll-container {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 transparent;
}
</style>
